<template>
  <el-container>
    <el-header
      >热门榜单推荐
      <el-main>
        <el-header>
          是否显示：
          <el-select
            v-model="status"
            clearable
            placeholder="请选择"
            @change="gai"
          >
            <el-option label="显示" value="1"> </el-option>
            <el-option label="不显示" value="0"> </el-option>
          </el-select>
        </el-header>
        <el-header>
          <el-button type="primary" @click="open"
            ><i class="el-icon-plus"></i>添加数据</el-button
          >
        </el-header>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="id"
            label="编号"
            min-width="180"
          ></el-table-column>

          <el-table-column
            prop="title"
            label="菜单名"
            min-width="180"
          ></el-table-column>

          <el-table-column label="图片" min-width="180">
            <template slot-scope="scope">
              <img class="img" :src="scope.row.pic[0]" alt="" /> </template
          ></el-table-column>

          

          <el-table-column prop="status" label="是否可用" min-width="180">
            <template slot-scope="scope">
              <el-switch
                class="switch"
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                active-text="显示"
                inactive-text="隐藏"
                @change="UpSwti(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" min-width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button type="text" @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <Motal7 :data-list="form" @add="addList" @edit="editList"></Motal7>
      </el-main>
    </el-header>
  </el-container>
</template>

<script>
import {
  Table,
  del,
  addlist,
  editlist,
  Switch,
} from "../../api/dataallocation/Distribution";
import Motal7 from "../../components/data allocation/Motal7.vue";
export default {
  components: {
    Motal7,
  },
  data() {
    return {
      tableData: [],
      form: {
        type: false,
        id: "",
        title: "",
        pic: "",
        sort: "",
        test: "添加",
        status: 1,
      },
      status: "",
    };
  },
  created() {
    Table({ gid: "57", limit: "20", page: "1", status: this.status }).then(
      (res) => {
        console.log(res.data);
        this.tableData = res.data.data.list;
      }
    );
  },

  methods: {
    UpSwti(val) {
      Switch({ id: val.id, status: val.status }).then((res) => {
        if (res.data.status == 200) {
          Table({
            gid: "57",
            limit: "20",
            page: "1",
            status: this.status,
          }).then((res) => {
            console.log(res.data);
            this.tableData = res.data.data.list;
          });
        }
      });
    },
    editList(val) {
      editlist({
        gid: "57",
        id: val.id,
        title: val.title,
        pic: val.pic,
        sort: val.sort,
        status: val.status
      }).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          Table({
            gid: "57",
            limit: "20",
            page: "1",
            status: this.status,
          }).then((res) => {
            console.log(res.data);
            this.tableData = res.data.data.list;
          });
        }
      });
    },
    addList(val) {
      addlist({
        gid: "57",
        title: val.title,
        pic: val.pic,
        sort: val.sort,
        status: val.status
      }).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          Table({
            gid: "57",
            limit: "20",
            page: "1",
            status: this.status,
          }).then((res) => {
            console.log(res.data);
            this.tableData = res.data.data.list;
          });
        }
      });
    },
    
    handleEdit(val) {
      this.form.type = true;
      this.form.test = "编辑";
      this.form.id = val.id;
      this.form.title = val.title;
      this.form.pic = val.pic;
      this.form.sort = val.sort;
      this.form.status = val.status;
    },
    open() {
      this.form.type = true;
      this.form.test = "添加";
      this.form.id = "";
      this.form.title = "";
      this.form.pic = "";
      this.form.sort = "";
      this.form.status = 1;
    },
    gai(val) {
      this.status = val;
      Table({ gid: "57", limit: "20", page: "1", status: this.status }).then(
        (res) => {
          console.log(res.data);
          this.tableData = res.data.data.list;
        }
      );
    },
    handleDelete(val) {
      del({ id: val.id }).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          Table({
            gid: "57",
            limit: "20",
            page: "1",
            status: this.status,
          }).then((res) => {
            console.log(res.data);
            this.tableData = res.data.data.list;
          });
        }
      });
    },
  },
};
</script>
<style lang='scss'>
.img {
  width: 48px;
  height: 48px;
}
.el-header,
.el-footer {
  background-color: white;
  color: #333;
  line-height: 60px;
}

.el-main {
  background-color: #b3c0d1;
  color: #333;
  //   line-height: 160px;
}

/* switch按钮款式 */
.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}
/*关上时文字地位设置*/
.switch .el-switch__label--right {
  z-index: 1;
}
/* 调整关上时文字的显示位子 */
.switch .el-switch__label--right span {
  margin-right: 9px;
}
/*敞开时文字地位设置*/
.switch .el-switch__label--left {
  z-index: 1;
}
/* 调整敞开时文字的显示位子 */
.switch .el-switch__label--left span {
  margin-left: 9px;
}
/*显示文字*/
.switch .el-switch__label.is-active {
  display: block;
}
/* 调整按钮的宽度 */
.switch.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 70px !important;
  margin: 0;
}
</style>